<template>
  <div class="home_page">
    <div class="header_box just_between">
      <div class="dis_flex">
        <img class="user_avatar" :src="INFO.avatar" alt="" />
        <div class="container_user_info flex_column">
          <div class="user_name">Hello,{{ INFO.name }}</div>
          <div class="tips_text">欢迎使用健康云联心理平台！</div>
        </div>
      </div>
      <div class="dis_flex">
        <img src="@/assets/images/home/message.png" alt="" class="mes_img" />
        <img src="@/assets/images/home/hi.png" class="hi_img" alt="" />
      </div>
    </div>
    <div class="white_bg">
      <div class="banner">
        <van-swipe indicator-color="#00aeff" class="my-swipe" :autoplay="5000">
          <van-swipe-item v-for="item in bannerList" :key="item.id">
            <img :src="joinUrlImg(item.img)" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="fn_list dis_flex just_spa_around">
        <div
          class="item_fn flex_column"
          v-for="(item, index) in fnList"
          @click="jumpPage(item.routerPath)"
          :key="index"
        >
          <div
            :style="{ backgroundColor: item.bgColor }"
            class="item_bg father_relative flex_center"
          >
            <div class="dot"></div>
            <img :src="item.icon" alt="" class="item_icon" />
          </div>
          <div class="item_text">{{ item.text }}</div>
        </div>
      </div>
    </div>

    <!-- 热门测评 -->
    <div class="head_label just_between">
      <div class="dis_flex">
        <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
        <div class="label_txt">热门测评</div>
      </div>
      <div class="more_txt" @click="$router.push('/evaluteList')">更多>></div>
    </div>
    <div class="evaluation_box common_box">
      <div
        v-for="(item, index) in hotcaleList"
        :key="index"
        class="item-evaluation dis_flex just_between"
        @click="toEvaluation(item.id)"
      >
        <div class="left_box dis_flex">
          <img :src="item.cover" alt="" class="cover_img" />
          <div class="">
            <div class="left_title">{{ item.name }}</div>
            <div class="dis_flex">
              <img
                src="@/assets/images/function/hot_icon.png"
                alt=""
                class="hot_img"
              />
              <span class="num">{{ item.heat }}人测过</span>
            </div>
          </div>
        </div>
        <img src="@/assets/images/common/right.png" alt="" class="arrow_img" />
      </div>
    </div>

    <!-- 心灵放松 -->
    <div class="head_label just_between">
      <div class="dis_flex">
        <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
        <div class="label_txt">心灵放松</div>
      </div>
    </div>
    <div class="relax_box common_box">
      <div class="music_info" @click="toMusic">
        <div class="music_desc">
          <div class="name">推荐音乐:{{ info.music?.name }}</div>
          <div class="text">心理音乐</div>
        </div>
        <img
          src="~@/assets/images/home/deliver_pause_icon.png"
          alt=""
          class="pause-img"
        />
      </div>
      <div class="sort_info dis_flex just_between" @click="toVideo">
        <div class="item-sort">
          <img :src="info.video?.img" alt="" class="sort-picture" />
          <div class="item-tit item_pad">{{ info.video?.name }}</div>
          <div class="dis_flex item_pad">
            <span class="sort-tit">心理视频</span>
            <img
              src="~@/assets/images/home/double_right_arrow.png"
              alt=""
              class="right-arrow"
            />
          </div>
        </div>
        <div class="item-sort" @click="toPic">
          <img :src="info.pic?.file" alt="" class="sort-picture" />
          <div class="item-tit item_pad">{{ info.pic?.name }}.</div>
          <div class="dis_flex item_pad">
            <span class="sort-tit">心理图片</span>
            <img
              src="~@/assets/images/home/double_right_arrow.png"
              alt=""
              class="right-arrow"
            />
          </div>
        </div>
      </div>

      <div class="sort_info dis_flex just_between">
        <div class="item-sort vertical-sort dis_flex" @click="toGame">
          <img
            src="https://img1.baidu.com/it/u=1317646438,372869564&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
            alt=""
            class="vertical-picture"
          />
          <div>
            <div class="item-tit item_pad">大头盔英雄争斗...</div>
            <div class="dis_flex item_pad">
              <span class="sort-tit">心理游戏</span>
              <img
                src="~@/assets/images/home/double_right_arrow.png"
                alt=""
                class="right-arrow"
              />
            </div>
          </div>
        </div>
        <div
          class="item-sort vertical-sort dis_flex"
          @click="toPsychologicalArticle"
        >
          <img :src="info.article?.img" alt="" class="vertical-picture" />
          <div>
            <div class="item-tit item_pad">{{ info.article?.name }}</div>
            <div class="dis_flex item_pad">
              <span class="sort-tit">心理文章</span>
              <img
                src="~@/assets/images/home/double_right_arrow.png"
                alt=""
                class="right-arrow"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 心灵智慧树 -->
    <div class="head_label just_between">
      <div class="dis_flex">
        <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
        <div class="label_txt">心灵智慧树</div>
      </div>
    </div>
    <div class="wisdom_tree_box">
      <div class="item-tree" v-for="(item, index) in info.tree" :key="index">
        <img :src="item.avatar" alt="" class="head_portrait" />
        <div class="tree-info">
          <div class="nickname">{{ item.user_name }}</div>
          <div class="time">{{ convertTimestampToDateTime(item.time) }}</div>
          <div class="content">
            {{ item.content }}
          </div>
          <div class="img_box" v-if="item.fruitImg.length>0">
            <img
              :src="i.img"
              alt=""
              v-for="(i, index) in item.fruitImg"
              :key="index"
              class="user_img"
            />
          </div>

          <div class="play_box dis_flex" v-if="false">
            <img
              src="@/assets/images/home/deliver_pause_icon.png"
              alt=""
              class="play_icon"
            />
            <div class="line"></div>
            <div class="progress_bar">
              <div class="file_bar" :style="{ width: progress + '%' }"></div>
              <div
                class="sliding_block"
                :style="{ left: progress + '%' }"
              ></div>
            </div>
            <div class="progress_time">00:10:26</div>
          </div>

          <div class="operation_box dis_flex just_between">
            <div class="dis_flex">
              <img src="@/assets/images/home/collect.png" alt="" />
              <span>{{ item.collect_num }}人收取过</span>
            </div>
            <div class="dis_flex">
              <img src="@/assets/images/home/like.png" alt="" />
              <span>点赞{{ item.like_num }}次</span>
            </div>
            <div class="dis_flex">
              <img src="@/assets/images/home/comment.png" alt="" />
              <span>{{ item.fruitComment.length }}条评论</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer-tips">已经到底啦～</div>

    <!-- 自评弹窗 -->

    <van-popup v-model="showPicker" round position="center">
      <div class="evaluate_pop">
        <img
          src="@/assets/images/home/evaluate_pop_img.png"
          alt=""
          class="pop_bg"
        />
        <div class="txt">自我评价</div>
        <div class="tips">
          请定时进行自我评价，可以让管理员更清晰了解你最近的基本状况
        </div>
        <div class="btn">开始自评</div>
        <img
          src="@/assets/images/home/close_icon.png"
          alt=""
          class="close_img"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { convertTimestampToDateTime } from "@/utils/time";
import { mapState } from "vuex";
import { joinUrlImg } from "@/utils/setUrlImg";
import { queryHotcale, queryHomeData } from "@/api/home/index";
export default {
  data() {
    return {
      showPicker: false,
      info: {},
      bannerList: [],
      hotcaleList: [],
      fnList: [
        {
          icon: require("@/assets/images/home/1.png"),
          text: "线上咨询",
          bgColor: "#01aefe",
          read: 0,
          routerPath: "/initiateConsultation",
        },
        {
          icon: require("@/assets/images/home/2.png"),
          text: "个人自评",
          bgColor: "#29cca6",
          read: 0,
          routerPath: "/selfAssessment/1/0",
        },
        {
          icon: require("@/assets/images/home/3.png"),
          bgColor: "#ff9500",
          text: "危机上报",
          read: 0,
          routerPath: "/crisisReport",
        },
        {
          icon: require("@/assets/images/home/4.png"),
          bgColor: "#00ccff",
          text: "普通测评",
          read: 0,
          routerPath: "/nav/evaluate",
        },
      ],
    };
  },
  computed: {
    ...mapState(["INFO"]),
  },
  created() {
    this.bannerList = this.INFO.unit.UnitBanner;
    this.getHotcale();
    this.getHomeData();
  },
  methods: {
    convertTimestampToDateTime,
    joinUrlImg,
    async getHomeData() {
      let res = await queryHomeData();
      if (res.code == 200) {
        this.info = res.data;
      }
    },
    toVideo() {
      this.$router.push(`/psychologicalVideo`);
    },
    toMusic() {
      this.$router.push(`/psychologicalMusic`);
    },
    toPic() {
      this.$router.push(`/psychologicalPicture`);
    },
    toPsychologicalArticle() {
      this.$router.push(`/psychologicalArticle`);
    },
    toGame() {
      this.$toast.fail("此功能未开放!");
    },
    //热门测评
    async getHotcale() {
      let res = await queryHotcale();
      if (res.code == 200) {
        this.hotcaleList = res.data;
      }
    },
    toEvaluation(id) {
      this.$router.push(`/normalAnswer?id=${id}&type=selfEvaluation`);
    },
    jumpPage(routerPath) {
      this.$router.push(routerPath);
    },
  },
};
</script>

<style lang="less" scoped>
.common_box {
  background: #ffffff;
  border-radius: 7px;
}

.dis_flex {
  display: flex;
  align-items: center;
}

.just_spa_around {
  justify-content: space-around;
}

.just_between {
  justify-content: space-between;
}

.home_page {
  padding: 0 10px;
  background-color: #f4f6fa;
  width: 100%;
  height: 195px;
  background-size: 100% 100%;
  overflow: hidden;
  background-image: url("~@/assets/images/home/bg.png");
}

.head_label {
  display: flex;
  align-items: center;
  margin: 19px 0;
}

.label_img {
  width: 5.33px;
  height: 15.33px;
  margin-right: 11.33px;
}

.label_txt {
  font-weight: bold;
  font-size: 14.67px;
  line-height: 14.67px;
}

.more_txt {
  color: #aaaaaa;
  font-size: 12px;
  line-height: 12px;
}

//头部

.header_box {
  display: flex;
  align-items: baseline;
  position: relative;
  z-index: 100;
  margin-top: 55px;
}

.mes_img {
  width: 30px;
  height: 30px;
}

.hi_img {
  width: 52.33px;
  height: 55px;
  margin-left: 10px;
}

.mes_img {
  font-size: 18px;
  line-height: 18px;
  font-weight: bold;
  color: #333333;
}

.user_name {
  font-weight: bold;
  font-size: 18px;
  color: #333333;
}

.tips_text {
  color: #333333;
  opacity: 0.8;
  font-size: 10.67px;
  line-height: 10.67px;
  margin-top: 6px;
}

.white_bg {
  background: #fff;
  border-radius: 6.67px;
}

.banner {
  /deep/ .my-swipe {
    height: 152+31px;

    .van-swipe-item {
      border-radius: 6px;
      width: 354px;
      height: 152px;
      line-height: 152px;
      text-align: center;
      overflow: hidden;

      img {
        width: 100%;
        height: 152px;
      }
    }
  }
}

.user_avatar {
  width: 40px;
  height: 40px;
  margin-right: 6.33px;
  border-radius: 10px;
}

//热门测评
.fn_list {
  padding-bottom: 13px;
}

.item_text {
  font-size: 12px;
  line-height: 12px;
  color: #333333;
  text-align: center;
  margin-top: 8.67px;
}

.item_bg {
  border-radius: 17px;
}

.item_icon {
  width: 45.33px;
  height: 45.33px;
}

//智慧树
.wisdom_tree_box {
}

.wisdom_tree_box .item-tree {
  display: flex;
  background-color: #ffffff;
  border-radius: 5px;
  margin-bottom: 6px;
  padding: 13.33px 16.67px 17.67px 10px;
}

.wisdom_tree_box .item-tree .head_portrait {
  width: 40px;
  height: 40px;
  margin-right: 14px;
  border-radius: 50%;
}

.tree-info {
  width: 100%;
  color: #333333;
}

.tree-info .nickname {
  font-size: 15px;
}

.tree-info .time {
  font-size: 12px;
  opacity: 0.5;
  margin-top: 10px;
}

.tree-info .content {
  font-size: 13px;
  margin: 20px 0 16px;
}

.tree-info .img_box {
  width: 100%;
  height: 82px;
}

.user_img {
  width: 82px;
  height: 82px;
  border-radius: 5px;
  margin-right: 13px;

  &:last-child {
    margin-right: 0;
  }
}

//播放
.play_box {
  width: 100%;
  height: 30px;
  background: #f4f6fa;
  border-radius: 6.67px;
  margin: 10px 0 20.33px;
  padding: 0 10px;
}

.play_box .play_icon {
  width: 18px;
  height: 18px;
}

.line {
  width: 0.33px;
  height: 19px;
  opacity: 0.3;
  background: #777777;
  margin: 0 6.67px;
}

.progress_bar {
  position: relative;
  width: 150px;
  height: 6px;
  background: #c2efff;
  border-radius: 3px;
}

.file_bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, #0eaeff 0%, #0eaeff 100%);
  border-radius: 3px;
  transition: width 0.1s linear;
}

.sliding_block {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 6px;
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    #0eaeff;
  border-radius: 4px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0) inset;
  transition: left 0.1s linear;
}

.progress_time {
  opacity: 0.7;
  font-size: 11.33px;
  color: #333333;
  margin-left: 8px;
}

.operation_box {
  margin-top: 21.33px;
}

.tree-info .operation_box span {
  color: #333333;
  font-size: 12px;
  opacity: 0.5;
}

.tree-info .operation_box img {
  width: 13px;
  height: 13px;
  margin-right: 8px;
}

.footer-tips {
  color: #333333;
  font-size: 12px;
  opacity: 0.5;
  margin: 30px 0 50px;
  text-align: center;
}

//心灵放松
.relax_box {
  padding: 14px 7px 7px 7px;
}

.relax_box .music_info {
  position: relative;
  width: 100%;
  height: 67px;
  color: #333333;
  font-size: 14px;
  background-size: cover;
  background-image: url("~@/assets/images/home/music_bg.png");
}

.relax_box .music_desc {
  position: absolute;
  top: 17px;
  left: 77px;
  width: 55%;
}
.relax_box .music_desc .name {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.5;
}

.relax_box .music_info .text {
  font-size: 12px;
  opacity: 0.5;
}

.relax_box .music_info .pause-img {
  position: absolute;
  right: 17px;
  top: 27px;
  width: 18px;
  height: 18px;
}

//分类
.sort_info {
  margin-top: 10px;
}

.item-sort {
  width: 160px;
  border: 1px solid #e7e7e7;
  border-radius: 5px;
  padding-bottom: 12px;
}

.vertical-sort {
  padding: 3.33px;
}

.sort-picture {
  width: 100%;
  height: 90px;
}

.vertical-picture {
  width: 56.67px;
  height: 81.33px;
}

.item-tit {
  width: 85%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
  font-size: 14px;
  color: #333333;
}

.item_pad {
  padding: 0 10px;
}

.sort-tit {
  font-size: 12px;
  color: #333333;
  opacity: 0.5;
}

.right-arrow {
  width: 10px;
  height: 10px;
  margin-left: 6px;
}

// 测评
.evaluation_box {
  padding: 0 10px;
  border-bottom: 1px solid #dddddd;
}

.item-evaluation {
  padding: 10px 0;
  border-bottom: 1px solid #dddddd;

  &:last-child {
    border-bottom: none;
  }
}

.left_box {
  display: flex;
  align-items: center;
}

.left_box .cover_img {
  width: 53.33px;
  height: 53.33px;
  border-radius: 7px;
  margin-right: 13px;
}

.left_box .left_title {
  color: #333333;
  font-size: 14.67px;

  margin-bottom: 14.67px;
}

.left_box .hot_img {
  width: 8.33px;
  height: 10.67px;
  margin-right: 4.48px;
}

.left_box .num {
  font-size: 12px;
  color: #ff9500;
}

.arrow_img {
  width: 8px;
  height: 14px;
}

.evaluate_pop {
  position: relative;
  padding-bottom: 50px;
  width: 270px;
  height: 336.67px;
  background: #ffffff;
  border-radius: 13.33px;
}

.evaluate_pop .pop_bg {
  position: relative;
  width: 100%;
  height: 200px;
}

.evaluate_pop .txt {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 23.33px;
  font-weight: bold;
  color: #333333;
  letter-spacing: 1.17px;
}

.evaluate_pop .tips {
  font-size: 14px;
  color: #888888;
  line-height: 24px;
  text-align: center;
  padding: 0 15px;
}

.evaluate_pop .btn {
  width: 166.67px;
  height: 36.67px;
  line-height: 36.67px;
  text-align: center;
  color: #ffffff;
  font-size: 15.33px;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  border-radius: 18.33px;
  margin: 26px auto 0 auto;
}

.evaluate_pop .close_img {
  position: absolute;
  bottom: -60px;
  /* 调整这个值使按钮出现在弹窗下方 */
  left: 50%;
  transform: translateX(-50%);
  width: 33.33px;
  height: 33.33px;
}

.van-popup {
  overflow: visible !important;
}
</style>
